<template>
	<view id="amap" style="width: 100vw;height: 100vh;">
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props: {
			myPosition: {
				type: Array,
				default:()=>[]
			},
			houseMarkers: {
				type: Array,
				default:()=>[]
			}
		},
		methods: {
			initAmap() {
				let that = this
				const map = new AMap.Map('amap', {
					resizeEnable: true,
					center: that.myPosition,
					zoom: 13
				});
				map.clearMap(); // 清除地图覆盖物
				let myMarkerSrc = 'static/myMark.png'
				let marker = new AMap.Marker({
					map: map,
					icon: new AMap.Icon({
						image: myMarkerSrc,
						imageSize: new AMap.Size(30, 30),
					}),
					position: [116.397428, 39.90923],
					offset: new AMap.Pixel(-13, -30)
				});
				var markerList = [] //用来装标记点
				var List = [{
					icon: 'static/tabbar/mine_selected.png',
					position: [116.205467, 39.907761]
				}, {
					icon: 'static/tabbar/mine_selected.png',
					position: [116.368904, 39.913423]
				}, {
					icon: 'static/tabbar/mine_selected.png',
					position: [116.305467, 39.807761]
				}];

				let markerSrc = 'static/tabbar/mine_selected.png'
				List.forEach(function(item, index) {
					let marker = new AMap.Marker({
						map: map,
						icon: new AMap.Icon({
							image: markerSrc,
							imageSize: new AMap.Size(40, 40),
						}),
						content: `<view style="padding: 5px 10px; background-color: cornflowerblue; font-size:10px; color: #fff; border-radius: 5px;position: relative;">
									<view>123</view>
									<view style="position: absolute;width: 7px;height: 7px; transform: rotate(45deg); bottom: -3px; right: 40%;background-color: cornflowerblue;"></view>
								</view>`,
						position: [item.position[0], item.position[1]],
						offset: new AMap.Pixel(-13, -30),
						extData: {
							index,
						},
					});
					markerList.push(marker);
					marker.on('click', function(e) {
						let index1 = e.target.getExtData().index;
						markerList.forEach((markeritem) => {
							let index2 = markeritem.getExtData().index;
							let icon = e.target.getIcon();
							if (index1 === index2) {
								// that保存this
								//从renderjs到service层：通过this.$ownerInstance.callMethod()方法可以调用service中的方法，第一个参数是方法名，第二个参数是传过去的参数
								that.$ownerInstance.callMethod('checkShow', true)
								console.log(this.$ownerInstance, 'this')
								e.target.setIcon(
									new AMap.Icon({
										image: 'static/tabbar/mine_selectedSel.png', // Icon的图像
										imageSize: new AMap.Size(50, 50),
									})
								);
								that.markerInfoShow = true

							} else {
								markeritem.setIcon(
									new AMap.Icon({
										image: 'static/tabbar/mine_selected.png', // Icon的图像
										imageSize: new AMap.Size(40, 40),
									})
								);
							}
						})

					})
					// 将标记点数组放入Map
					map.add(markerList);
				});
			},
		}
	}
</script>

<script module="test" lang="renderjs">
	export default {
		mounted() {
			if (window.AMap) {
				//todo 如果能访问到AMap直接初始化
				this.initAmap();
			} else {
				//todo 动态引入
				const script = document.createElement('script');
				script.src =
					"https://webapi.amap.com/maps?v=2.0&key=3ab938b35285c42c45c6e0e8417b3170";
				script.onload = () => {
					//todo 初始化地图
					this.initAmap();
				}
				document.head.appendChild(script);
			}

		},
		methods: {}
	}
</script>

<style>
</style>